import React, { Component, createContext } from 'react'



//1.创建一个上下文
const TitleContext = createContext()
const MainContext = createContext()

//可以让我们通过控制台查看当前 Context 的名字
//displayName 就是给 Context 起名字用的 
TitleContext.displayName = 'title'
MainContext.displayName = 'main'


class First extends Component {
    // 3.通过静态属性进行接收
    // static contextType = TitleContext
    render() {

        return (
            <div>
                {/* 4.使用 this.context 拿到我的参数然后使用 */}
                First:{this.context.name}
                <Section></Section>
            </div>
        )
    }
}

// 3.接收参数
First.contextType = TitleContext








const Section = () => {
    return (
        <>
            <div>
                {/* 3.通过 TitleContext.Consumer 接收数据 */}
                <TitleContext.Consumer>
                    {/* 4.使用数据 */}
                    {value => (<div>Section:{value.name}</div>)}
                </TitleContext.Consumer>
            </div>
        </>
    )
}


export default class App extends Component {
    render() {
        return (
            <div>
                {/* 2.使用上下文对象中的 Provider 组件 , 配合 value 属性进行值的传递 */}
                <TitleContext.Provider value={{ name: '张一', age: 18, sex: '女' }}>
                    <MainContext.Provider value={{ name: '张三', age: 20, sex: '男' }}>
                        <First></First>
                    </MainContext.Provider>
                </TitleContext.Provider>
            </div>
        )
    }
}
